<template>
	<view class="content">
		<view class="head">
			<image :src="headicon" mode="" v-if="userInfo"></image>
			<image src="../../static/touxiang.png" mode="" v-else></image>
			<text v-if="userInfo">{{userInfo.name}}</text>
			<text v-else>用户未登录</text>
		</view>
		<view class="entry-wrapper">
			<view class="item">
				<image src="../../static/my/gerenxinxi.png" mode=""></image>
				<text>个人信息</text>
				<image src="../../static/my/xiangyoujiantou.png" mode=""></image>
			</view>
			<view class="item">
				<image src="../../static/my/dingdanliebiao.png" mode=""></image>
				<text>订单列表</text>
				<image src="../../static/my/xiangyoujiantou.png" mode=""></image>
			</view>
			<view class="item">
				<image src="../../static/my/xiugaimima.png" mode=""></image>
				<text>修改密码</text>
				<image src="../../static/my/xiangyoujiantou.png" mode=""></image>
			</view>
			<view class="item">
				<image src="../../static/my/yijianfankui.png" mode=""></image>
				<text>意见反馈</text>
				<image src="../../static/my/xiangyoujiantou.png" mode=""></image>
			</view>
		</view>
		<button type="primary" @click="quit" v-if="userInfo">退出</button>
		<button type="primary" @click="quit" v-else>去登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				headicon: ''
			}
		},
		onLoad() {

		},
		methods: {
			quit() {
				uni.clearStorage()

				uni.navigateTo({
					url: '../index/login'
				})
			}
		},
		
		onShow() {
			let userinfo = uni.getStorageSync('userinfo')
			console.log(userinfo);
			this.userInfo = userinfo
			// console.log(this.userInfo);
			// 登录时显示头像，未登录时不显示
			if (userinfo) {
				this.headicon = '/static/tt.jpg'
			} else {
				this.usericon = ''
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.head {
		display: flex;
		align-items: center;
		margin-top: 70rpx;
		position: relative;
		right: 90px;
	}

	.head image {
		width: 70px;
		height: 70px;
		border-radius: 50%;
		margin-bottom: 80rpx;
		margin-right: 60rpx;
	}

	.head text {
		position: relative;
		bottom: 40rpx;
		color: #000;
	}

	.entry-wrapper {
		border-top: #C8C7CC solid 1rpx;
		width: 90%;

	}

	.entry-wrapper .item {
		display: flex;
		height: 80rpx;
		justify-content: space-between;
		align-items: center;
		border-bottom: #C8C7CC solid 1rpx
	}

	.entry-wrapper .item image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 25rpx;
	}

	.entry-wrapper .item text {
		position: relative;
		right: 200rpx;
		color: #939396;
	}

	button {
		margin-top: 70rpx;
		width: 90%;
	}
</style>